<template>
  <div class="template">
    <div class="search">
      <div class="search-center">
        <div class="search-item">
            用户名：
            <Input clearable
            v-model="search.contractCode"
            placeholder="请输入"
            style="width: 150px; margin-left: 10px"
            icon="ios-search"
            ></Input>
        </div>
        <div class="search-item">
            电话：
            <Input clearable
            v-model="search.custName"
            placeholder="请输入"
            style="width: 150px; margin-left: 10px"
            icon="ios-search"
            ></Input>
        </div>
        <div class="search-item">
            状态：
            <Select clearable
                style="width:150px;margin-left:10px"
            v-model="search.examineStatus"
            :label-in-value="true"
            placeholder="请选择"
            class="select"
            >
            <Option value="1" label="启用"></Option>
            <Option value="0" label="禁用"></Option>
            </Select>
         </div>

        <Button
          style="width: 80px;margin-right: 10px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button
        >
         <Button style="width: 80px" @click="clearFn">重置</Button>
      </div>
    </div>
    <div class="filter">
        <div class="filter-center">
            <Button
          style="margin-right: 10px"
          type="primary"
          icon="ios-add"
           @click="addAccount()"
          >新建账号</Button
        >
        </div>

    </div>

    <div class="table">
      <Table

        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

  <addAccount v-model="diyDom.showModal" :userId='diyData.userId' @on-success="searchFn()"></addAccount>
  </div>
</template>

<script>
import {
  userList,userResetPwd
} from '@/api/system/account-manage.js'
import addAccount from './add-account.vue'
export default {
  name: 'account-manage',
  components: {
    addAccount
  },
  data () {
    return {
      query: {},
      search: {
        contractCode: '',
        custName: '',
        pageNo: 1,
        pageSize: 10,
        receiveTime: ''
      },
      diyDom: {
        showModal: false
      },
      diyData: {
        row: '',
        id: '',
        userId: '',
        columns: [
          {
            title: '登录账号',
            width: 100,
            key: 'username'
          },
          {
            title: '昵称',
            width: 100,
            key: 'nickname'
          },
          {
            title: '电话',
            width: 150,
            key: 'mobile'
          },
          // {
          //   title: "角色",
          //   key: "roleIdList",
          // },
          {
            title: '状态',
            width: 100,
            key: 'status',
            render: (h, params) => {
              var html = ''
              if (params.row.status == 1) {
                html = h(
                  'p',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    }
                  },
                  '启用'
                )
              } else {
                html = h(
                  'p',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#333'
                    }
                  },
                  '禁用'
                )
              }

              return html
            }
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.diyDom.showModal = true
                        this.diyData.userId = params.row.userId
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        var that=this
                        this.diyData.userId = params.row.userId
                        var password = this.getCode()
                        this.$Modal.confirm({
                          title: '提示',
                          content: '是否确认重置当前用户密码?',
                          onOk: () => {                            
                            userResetPwd({ userId: params.row.userId,password:password }).then(() => {
                              setTimeout(function(){
                                that.$Modal.success({
                                  title: '提示',
                                  content: '密码重置成功,新密码为:'+password,
                                  okText:'复制',
                                  onOk:()=>{
                                    let oInput = document.createElement('input')
                                    oInput.value = password
                                    document.body.appendChild(oInput)
                                    oInput.select() // 选择对象;
                                    document.execCommand('copy')
                                    that.$Message.success('复制成功')
                                  }
                                })
                              },300)
                              
                            })
                          }
                        })
                      }
                    }
                  },
                  '密码重置'
                ),
                ])
            }
          }
        ]
      },
      apiData: {
        total: 0,
        tableList: []
      }
    }
  },
  computed: {
  },
  methods: {
    addAccount () {
      this.diyData.userId = ''
      this.diyDom.showModal = true
    },
    // 获取表格数据
    getTableList () {
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      userList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data.page
        this.apiData.tableList = list
        this.apiData.total = totalCount
      })
        .finally(() => this.$store.commit('setSpinShow', false))
    },
    // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    },
    // 清空
    clearFn () {
      this.search = {
        contractCode: '',
        custName: '',
        pageNo: 1,
        pageSize: 10,
        receiveTime: 1
      }
      this.getTableList()
    },
     getRandom(min, max) {
  return Math.round(Math.random() * (max - min) + min);
},
getCode() {
  let code = '';
  for (var i = 0; i < 6; i++) {
    var type = this.getRandom(1, 3);
    switch (type) {
      case 1:
        code += String.fromCharCode(this.getRandom(48, 57));//数字
        break;
      case 2:
        code += String.fromCharCode(this.getRandom(65, 90));//大写字母
        break;
      case 3:
        code += String.fromCharCode(this.getRandom(97, 122));//小写字母
        break;
    }
  }
  return code;
}

  },
   mounted () {
    this.getTableList()
  },
  activated () {
    this.getTableList();
  },
}
</script>

<style scoped lang="less">

</style>
